<template>
  <div class="part">
    <!-- 顶部搜索框 -->
    <van-row type="flex" justify="space-around" align="center">
      <i class="iconfont iconfont-31fanhui1" @click="onReturn"></i>
      <van-search
        v-model="Value"
        placeholder="请输入搜索关键词"
        icon-prefix="iconfont"
        left-icon="wxbsousuotuiguang"
        autofocus
      /><i class="iconfont iconfont-gengduo1"></i>
    </van-row>
    <!-- 内容 -->
    <van-row type="flex" justify="space-between">
      <!-- 侧边导航 分类 -->
      <van-col span="5">
        <van-sidebar v-model="activeKey" @change="onChange" class="w88" index>
          <van-sidebar-item
            v-for="(title, value) in titles"
            :key="value"
            :title="title.name"
          />
        </van-sidebar>
      </van-col>
      <van-col span="19">
        <IndexRight1 :titles="titles" :ListLeftValue="ListLeftValue" />
      </van-col>
    </van-row>
    <Tabbar />
  </div>
</template>
  
<script>
import Vue from 'vue';
import { Search, Sidebar, SidebarItem } from 'vant';
import Tabbar from '../../components/tabbar.vue';
import IndexRight1 from './commponents/indexRight1.vue';
import { getSort } from '@/api/sort';

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);

export default {
  name: 'Home',
  components: {
    Tabbar,
    IndexRight1,
  },
  data() {
    return {
      Value: null,
      activeKey: 0,
      ListLeftValue: 0,
      phoneList: [],
      titles: [],
    };
  },
  created() {
    getSort((el) => {
      this.titles = el.data;
      // console.log('传的值', this.titles);
    });
  },
  methods: {
    onChange(index) {
      this.ListLeftValue = index;
      // console.log(this.ListLeftValue);
    },
    onReturn() {
      this.$router.go(-1);
      console.log('return');
    },
  },
};
</script>

<style lang="scss" scoped>
.w100 {
  width: 100%;
}
.w88 {
  width: 88%;
}
</style>
